/**

 * User: seeker910
 * Date: 13-10-24
 * Time: 下午10:24

 */
/*
 * */
Rsd.define('Rsd.control.Component', {
    extend: 'Rsd.common.ComponentX',
    requires: ['Rsd.common.Layouter', 'Rsd.data.JsonSchema'],
    xtype: 'control',
    ctrlTagName: '',
    labelTagName: 'label',
    //
    /**
     *{ 
        tagName:'',
        element:null,
        style:{},
        cls:''
      }
     */
    //ctrl: null,
    /*
    * */
    ctrlCls: '',
    /*
    * ctrl 快捷访问件
    * */
    accessKey: null,
    /*
    *
    * {
    *     xtype:'',//控件xtype  
    *     position: 'left',
    *     align: 'right',//文字对其方式
    *     visible: null,//null:有内容显示，无内容不显示 ,true:始终显示，false：始终不显示
    *     space: 10,
    *     cls: '',
    *     //承载label的element样式
    *     style:{}, 
    *     //以下属性，对象创建后有效
    *     //labe创建后，用于承载label的html dom元素，
    *     element: null,
    *     //label 创建后的内容对象 ，可以是字符串 也可以是组件
    *     content: null,//{string|control|object}
    * }
    * */
    //label:,
    cursor: null,
    /*
    * */
    disabled: false,
    /*
    * */
    focused: false,
    /*
     * click:方法可被注入
     * */
    handler: null,
    /*
    * */
    handlerTarget: 'ctrl',
    /**
     * true 表示阻止click事件的默认行为‌
     */
    preventDefault: true,
   
    /*
    * */
    constructor: function Component(config) {
        config = config || {};
        this.apply(config);
    },
    /*
     * */
    initComponentEx: function initComponentEx() {
        //debugger;
        //label or header
        if (this.label.visible === false) {
            //在label不显示时，dom 是根据ctrl参数创建的,只需将 dom 赋值给ctrl
            this.ctrl.element = this.dom;
        }
        else {
            //xtype 处理
            if (!Rsd.isEmpty(this.label.xtype)) {
                this.label.content = Rsd.widget(this.label.xtype, this.label);
                this.label.content.parent = this;
                this.label.element = this.label.content.dom;
                //渲染到dom
                this.label.content.renderTo(this.dom);
            }
            //dom
            if (!this.label.element && this.label.tagName) {

                this.label.element = document.createElement(this.label.tagName);
                if (this.label.tagName.toLowerCase() !== 'p') {
                    this.label.element.style.whiteSpace = "nowrap";
                }

                //content 处理
                if (this.label.content == null && this.label.text) {
                    this.label.content = this.label.text;
                }
                // 不能使用text 属性 与 link ,label控件 属性text 冲突
                if (this.label.content == null && Rsd.isString(this.title)) {
                    this.label.content = this.title;
                }

                //image
                if (this.label.tagName.toLowerCase() == 'img') {
                    if (Rsd.isEmpty(this.label.content) && Rsd.isEmpty(this.label.src)) {

                        this.label.element.src = Rsd.emptyImage();
                    }
                    else {
                        this.label.element.src = this.label.content || this.label.src;
                    }
                }
                else {
                    if (Rsd.isString(this.label.content)) {
                        this.label.element.innerHTML = this.label.content;
                    }
                }
            }

        }

        if (this.label.element) {
            this.label.element.id = this.id + '_label';
            this.elements['label'] = this.label.element;

            this.label.element.style.display = this.label.visible ? '' : 'none';

            if (Rsd.isEmpty(this.label.xtype)) {
                this.label.element.classList.add('x-label');
            }
            if (this.label.cls) {
                this.label.element.classList.add(this.label.cls);
            }
            if(this.label.tip)
            {
                 this.label.element.title = this.label.tip;
            }
        }

        //ctrl or body
        if (!this.ctrl.element && this.ctrl.tagName) {

            if (this.ctrl.tagName == 'svg') {
                var _doc = window.svgDocument || window.document;
                this.ctrl.element = _doc.createElementNS(this.ns, "svg");
            }
            else {
                this.ctrl.element = document.createElement(this.ctrlTagName);
            }

        }

        if (this.ctrl.element) {
            this.ctrl.element.id = this.id + '_ctrl';
            this.elements['ctrl'] = this.ctrl.element;

            this.addCls('ctrl', 'x-ctrl');
            this.addCls('ctrl', this.ctrl.cls);

            if (this.tabIndex != null) {
                this.ctrl.element.setAttribute("tabIndex", this.tabIndex);
            }

            if (this.tip != undefined && this.tip != null) {

                this.ctrl.element.setAttribute("title", this.tip);
            }

            if (this.accessKey) {
                this.ctrl.element.setAttribute("accessKey", this.accessKey);
            }

            if (this.overflow) {
                this.ctrl.element.style.overflow = this.overflow;
            }

            if (this.label.visible !== false) {
                //设置 ctrl  宽度和高度
                var _position = this.label.position || 'top';

                switch (_position.toLowerCase()) {
                    case 'top':
                        {
                            this.ctrl.element.style.width = "100%";
                            this.ctrl.element.style.height = "0px";
                        }
                        break;
                    case 'bottom':
                        {
                            this.ctrl.element.style.width = "100%";
                            this.ctrl.element.style.height = "0px";
                        }
                        break;
                    case 'left':
                        {
                            this.ctrl.element.style.width = "0px";
                            this.ctrl.element.style.height = "100%";
                        }
                        break;
                    case 'right':
                        {
                            this.ctrl.element.style.width = "0px";
                            this.ctrl.element.style.height = "100%";
                        }
                        break
                    default:
                        throw new Error('Property position of header or label is unknown value [' + this.label.position + '].');
                        break;
                }
            }

        }

    },
    /*
     * */
    onBeforeInit: function onBeforeInit() {
      
        if (this.handler || this.onclick) {
            this.listeners = this.listeners || {};
            Rsd.apply(this.listeners, {
                click: {
                    element: this.handlerTarget || 'ctrl',
                    fn: function (s, e) {
                       
                        if (this.preventDefault) {
                            e.preventDefault();
                        }
                        var _flag = true;
                        //beforeClick
                        if (Rsd.isFunction(this.beforeClick)) {
                            _flag = this.beforeClick.apply(this, arguments);
                        }
                        if (Rsd.isString(this.beforeClick)) {
                            _flag = this.funApplyByIOC(this.beforeClick, arguments)
                        }
                        if (_flag == false) {
                            return;
                        }
                        //click
                        if (Rsd.isFunction(this.handler)) {
                            return this.handler.apply(this, arguments);
                        }
                        if (Rsd.isString(this.handler)) {
                            return this.funApplyByIOC(this.handler, arguments)
                        }
                        if (Rsd.isFunction(this.onclick)) {
                            return this.onclick.apply(this, arguments);
                        }
                        if (Rsd.isString(this.onclick)) {
                            return this.funApplyByIOC(this.onclick, arguments)
                        }
                    }
                }
            })
        }

        this.callParent();
    },
    /**
     * @description  initialComponent 之后 ，Render 之前
     * */
    onAfterInit: function onAfterInit() {

        this.callParent();
        
        if (this.handler || this.onclick) {
            this.setElStyle(this.handlerTarget || 'ctrl',{cursor: 'pointer'})
        }
    },
    /**
     * @description 在 dom  appendChild 所有子控件后发生
     * */
    onAfterRender: function onAfterRender() {

        var me = this;
        if (me.label.element) {
            if (this.label.content instanceof Rsd.common.ComponentX) {
                //已在初始化 后渲染到dom
            }
            else {
                me.dom.appendChild(me.label.element);
            }
        }

        if (me.ctrl.element && me.ctrl.element != me.dom) {
            me.dom.appendChild(me.ctrl.element);
        }

        if (me.cursor) {

            me.ctrl.element.style.cursor = me.cursor;
        }

        me.callParent();

        me.setDisabled(me.disabled);

        if (me.focused) {
            me.focus();
        }

        if (this.design) {

            var me = this;
            var _btn_design = document.createElement('a');
            //_btn_design.style.position = "absolute";
            _btn_design.style.cursor = "pointer";
            //_btn_design.style.top = "0px";
            //_btn_design.style.right = "5px";

            var _design = {
                viewBox: "0 0 1024 1024",
                path: "M360.106667 170.666667a42.666667 42.666667 0 0 0 0-85.333334H238.933333a42.666667 42.666667 0 0 0-42.666666 42.666667v280.746667l-72.96 72.96a42.666667 42.666667 0 0 0 0 60.586666l72.96 72.96V896a42.666667 42.666667 0 0 0 42.666666 42.666667h121.173334a42.666667 42.666667 0 0 0 0-85.333334H281.6v-256a42.666667 42.666667 0 0 0-2.986667-16.64 46.506667 46.506667 0 0 0-10.24-14.933333L213.333333 512l54.613334-54.613333a46.506667 46.506667 0 0 0 10.24-14.933334A42.666667 42.666667 0 0 0 281.6 426.666667V170.666667zM902.4 481.706667l-72.96-72.96V128a42.666667 42.666667 0 0 0-42.666667-42.666667H665.6a42.666667 42.666667 0 0 0 0 85.333334h78.506667v256a42.666667 42.666667 0 0 0 2.986666 16.64 46.506667 46.506667 0 0 0 10.24 14.933333L810.666667 512l-54.613334 54.613333a46.506667 46.506667 0 0 0-10.24 14.933334 42.666667 42.666667 0 0 0-2.986666 16.64v256H665.6a42.666667 42.666667 0 0 0 0 85.333333h121.173333a42.666667 42.666667 0 0 0 42.666667-42.666667v-281.6l72.96-72.96a42.666667 42.666667 0 0 0 0-60.586666z"
            };
            var _svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            _svg.style.width = '13px';
            _svg.style.position = 'relative';
            _svg.setAttribute("viewBox", _design.viewBox);
            var _path = document.createElementNS('http://www.w3.org/2000/svg', "path");
            _path.setAttributeNS(null, "d", _design.path);
            _path.setAttributeNS(null, "fill", 'red');
            _path.setAttributeNS(null, "stroke", 'red');
            _svg.appendChild(_path);

            _btn_design.appendChild(_svg);
            //_btn_design.setAttribute("columnIndex",h + '.' + c);
            //_btn_design.setAttribute("columnName",_col.name);
            _btn_design.title = "点击编辑[" + this.name + "]字段配置信息";
            _btn_design.onclick = function (evt) {
                //console.log(evt.target.parentElement.parentElement); 
                var cfg = {};

                if (me.designHandler) {
                    me.funApplyByIOC(me.designHandler, [me]);
                }
                else {
                    var field_name = me.name;
                    alert('Can not edit field [' + field_name + '],beacuse property designHandler value is null');
                }
            };
            //异步追加， 目的是：追加到父dom最后一个位置
            setTimeout(function () {
                me.dom.appendChild(_btn_design);
            }, 100);
        }
    },
    /**
     * 
     * @param {*} content 
     */
    setLabel: function setLabel(content) {
        console.error('call function setLabel is not allowed,label is static info.');
    },

    /*
    * */
    setDisabled: function setDisabled(disabled) {
        this.disabled = disabled;
        if (disabled) {
            this.dom.style.pointerEvents = 'none';
            this.dom.classList.add('x-control-disabled');
        }
        else {
            this.dom.style.pointerEvents = 'all';
            this.dom.classList.remove('x-control-disabled');
        }
    },
    /*
    * */
    focus: function focus() {

        if (this.ctrl.element) {
            this.ctrl.element.focus();
        }
    },
    /*
    * */
    select: function select() {
        if (this.ctrl.element) {
            this.ctrl.element.select();
        }
    },
    /*
    * */
    checkValue: function checkValue() {
        return true;
    },
    /*
     *
     * */
    getError: function getError() {
        return this.errorTip;
    },
    /*
    * 复制到剪贴板
    * */
    copy: function () {

        if (this.ctrl.element && this.ctrl.element.select) {
            this.ctrl.element.select(); // 选择对象
            return document.execCommand("Copy"); // 执行浏览器复制命令

        }

        return false;
    }


}, function (type) {

    var _labelGetter = function () {

        if (this.hasOwnProperty('__label') == false) {
            this.__label = Rsd.apply({
                tagName: this.labelTagName,
                cls: this.labelCls,
                style: this.labelStyle,
                content: null,
                position: 'left',
                align: null,
                visible: null,
                space: 10,
                cls: '',
                element: null
            }, this.__proto__['__label'] || {});
        }

        return this.__label;
    };
    var _labelSetter = function (label) {
        //debugger; 
        if (this.hasOwnProperty('__label') == false) {

            this.__label = Rsd.apply({
                content: null,
                position: 'left',
                align: null,
                visible: null,
                space: 10,
                cls: '',
                element: null
            }, this.__proto__['__label'] || {});

            if (this.labelTagName) {
                this.__label.tagName = this.labelTagName;
            }
            if (this.labelCls) {
                this.__label.cls = this.labelCls;
            }
            if (this.labelStyle) {
                this.__label.style = this.labelStyle;
            }
        }


        if (Rsd.isObject(label)) {
            Rsd.apply(this.__label, label);
            if (label.visible === undefined || label.visible === null) {
                this.__label.visible = true;
            }
        }
        if (Rsd.isString(label)) {
            this.__label.content = label;
            this.__label.visible = true;
        }

        if (label === undefined || label === null || label === false) {
            this.__label.visible = false;
        }

        if (this.__label.visible === undefined || this.__label.visible === null) {

            this.__label.visible = (Rsd.isString(this.__label.content) && this.__label.content.length > 0);

            this.__label.visible = this.__label.visible || (this.__label.content instanceof Rsd.common.ComponentX);

            this.__label.visible = this.__label.visible || (this.__label.xtype && this.__label.xtype.length > 0);

        }

    };

    this.defineProperty(type, "label", _labelGetter, _labelSetter, true);

    var _titleGetter = function () {

        return this.label.content;
    };
    var _titleSetter = function (value) {

        if (Rsd.isEmpty(this.label.content) || Rsd.isString(this.label.content)) {
            this.label.content = value;
        }
        //this.label.element.appendChild(document.createTextNode(this.label.content));//不支持html标签
        if (this.labelTagName.toLowerCase() == 'img') {
            if (Rsd.empty(this.label.content)) {

                this.label.element.src = Rsd.emptyImage();
            }
            else {
                this.label.element.src = this.label.content;
            }
            return;
        }
        if (this.label && this.label.content instanceof Rsd.common.ComponentX) {
            this.label.content.setValue(value);
            return;
        }
        if (this.label && this.label.content instanceof Element) {
            this.label.content.innerHTML = value;
            return;
        }
        if (this.label && this.label.element) {
            this.label.element.innerHTML = value;
            return;
        }

        return;

    };
    this.defineProperty(type, "title", _titleGetter, _titleSetter, true);

    var _ctrlGetter = function () {

        if (this.hasOwnProperty('__ctrl') == false) {
            this.__ctrl = {
                element: null,
                tagName: this.ctrlTagName,
                cls: this.ctrlCls,
                style: this.ctrlStyle
            }
        }
        return this.__ctrl;
    };
    var _ctrlSetter = function (value) {

        if (this.hasOwnProperty('__ctrl') == false) {

            this.__ctrl = Rsd.apply({
                element: null,
                tagName: this.ctrlTagName,
                cls: this.ctrlCls,
                style: this.ctrlStyle
            }, this.__proto__['__ctrl'] || {});
        }
        if (Rsd.isEmpty(value)) {
            return;
        }
        if (value instanceof Element) {
            this.ctrl.element = value;
            return;
        }
        if (Rsd.isString(value)) {
            this.ctrl.tagName = value;
            return;
        }
        if (Rsd.isObject(value)) {
            Rsd.apply(this.__ctrl, value);
        }

    }
    this.defineProperty(type, "ctrl", _ctrlGetter, _ctrlSetter, false);

    //不能使用 error 名称，与基类 error方法冲突
    var _errorTipGetter = function () {
        return this.__errorTip;
    }
    var _errorTipSetter = function (error) {
        this.__errorTip = error;
    }
    this.defineProperty(type, "errorTip", _errorTipGetter, _errorTipSetter, true);
  
});

